<template>
  <div>
    <div class="c-fs24 c-clearfix c-fc-xblack wrap c-lh36 " :id="'text'+replyIndex+'reply'+commenIndex">
      <!-- <div class="c-ws-n c-inlineblack fl c-lh36 ">

      </div> -->
      <div class="c-lh36 c-fs24">
        <div class="c-ws-n  c-fs24 c-fc-xblack c-mr6 c-fw600 c-inlineblack">
          {{reply.nickname+' :'}}
        </div>
        <span class="c-fc-xblack">{{reply.content }}</span>
      </div>
    </div>
    <div class="c-flex-row c-aligni-center">
      <div v-if="showDesc" class="c-fs24 c-fc-xblue c-pt10 c-pb10" @click="showContent">{{showMore?'收起':'展开'}}</div>
    </div>
  </div>
</template>

<script>
let textLineHeight = 0;
export default {
  name: 'Comment',
  components: {
  },
  props: {
    reply:{
      type: Array,
      default: []
    },
    replyIndex:{
      type:Number,
      default:0
    },
    commenIndex:{
      type:Number,
      default:0
    }
  },
  beforeCreate() {

  },
  data() {
    return {
      showDesc:false,
      showMore:false
    }
  },
  created() {

  },
  mounted() {
    this.showDescHeight()
  },
  computed: {

  },
  watch: {
  },
  methods: {
    showContent() {
      this.showMore = !this.showMore
      let queryTextContent = document.querySelectorAll("#text" + this.replyIndex + 'reply' + this.commenIndex)[0]
      if (!queryTextContent) {
          return;
        }
      if (this.showMore) {
        // queryTextContent.style.height = "auto"
        queryTextContent.className = "c-fs24 c-clearfix c-fc-xblack wrap c-lh36";
      } else {
        textLineHeight = window.getComputedStyle(queryTextContent).lineHeight.split("px")[0].split(".")[0];
        // queryTextContent.style.height = textLineHeight * 3 + "px";
        queryTextContent.className = "c-fs24 c-clearfix c-fc-xblack wrap c-lh36 c-text-ellipsis3";
      }
    },
    showDescHeight() {
      this.showDesc = false;
      this.showMore = false;
      this.$nextTick(() => {
        //获取当前内容的行高，超过3行则显示更多
        let queryTextContent = document.querySelectorAll("#text" + this.replyIndex + 'reply' + this.commenIndex)[0]
        console.log(queryTextContent.offsetHeight, textLineHeight)
        if (!queryTextContent) {
          return;
        }
        textLineHeight = window.getComputedStyle(queryTextContent).lineHeight.split("px")[0].split(".")[0];
        console.log(queryTextContent.offsetHeight, textLineHeight)
        if (queryTextContent.offsetHeight >= textLineHeight * 3) {
          // queryTextContent.style.height = textLineHeight * 3 + "px";
          queryTextContent.className = "c-fs24 c-clearfix c-fc-xblack wrap c-lh36 c-text-ellipsis3";
          this.showDesc = true;
        }
        console.log(queryTextContent)
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
